<template>
	<view class="page">
		<view class="curved_box">
			<view class="text_cover">
				<image class="titleImg" src="../../static/cy.png"></image>
				<view class="content"><mix-tree :list="list" @treeItemClick="treeItemClick"></mix-tree></view>
			</view>
		</view>
	</view>
</template>

<script>
import app from '../../appcould.js';
export default {
	data() {
		return {
			list: []
		};
	},
	onLoad() {
		let testList = [
			{
				id: 1,
				name: '北京市',
				children: [
					{
						id: 11,
						name: '市辖区',
						children: [
							{
								id: 111,
								name: '西城区',
								children: [
									{
										id: 1111,
										name: '南河沿大街',
										children: [
											{
												id: 11111,
												name: '紫金宫饭店'
											}
										]
									}
								]
							},
							{
								id: 112,
								name: '东城区'
							},
							{
								id: 113,
								name: '朝阳区'
							},
							{
								id: 113,
								name: '丰台区'
							}
						]
					}
				]
			},
			{
				id: 2,
				name: '河北省',
				children: [
					{
						id: 21,
						name: '石家庄市'
					},
					{
						id: 22,
						name: '唐山市'
					},
					{
						id: 23,
						name: '秦皇岛市'
					}
				]
			},
			{
				id: 3,
				name: '山东省',
				children: [
					{
						id: 31,
						name: '济南市',
						children: [
							{
								id: 311,
								name: '历下区',
								children: [
									{
										id: 3131,
										name: '解放路街道办事处'
									}
								]
							},
							{
								id: 312,
								name: '槐荫区'
							},
							{
								id: 313,
								name: '天桥区'
							},
							{
								id: 314,
								name: '历城区'
							},
							{
								id: 315,
								name: '长清区'
							}
						]
					},
					{
						id: 32,
						name: '青岛市'
					},
					{
						id: 33,
						name: '临沂市',
						children: [
							{
								id: 331,
								name: '兰山区',
								children: [
									{
										id: 3331,
										name: '金雀山街道'
									}
								]
							},
							{
								id: 332,
								name: '河东区'
							},
							{
								id: 333,
								name: '罗庄区',
								children: [
									{
										id: 3331,
										name: '盛庄街道'
									}
								]
							}
						]
					},
					{
						id: 34,
						name: '日照市'
					},
					{
						id: 35,
						name: '淄博市'
					},
					{
						id: 36,
						name: '枣庄市'
					},
					{
						id: 37,
						name: '东营市'
					},
					{
						id: 38,
						name: '潍坊市'
					},
					{
						id: 39,
						name: '烟台市'
					},
					{
						id: 40,
						name: '济宁市'
					},
					{
						id: 41,
						name: '泰安市'
					},
					{
						id: 42,
						name: '威海市'
					},
					{
						id: 43,
						name: '滨州市'
					},
					{
						id: 44,
						name: '菏泽市'
					}
				]
			},
			{
				id: 4,
				name: '河南省'
			},
			{
				id: 5,
				name: '湖北省'
			},
			{
				id: 6,
				name: '湖南省'
			}
		];
		this.getData();
		// setTimeout(() => {
		// 	this.list = testList;
		// }, 300);
	},
	onShow() {},
	methods: {
		getData() {
			let that = this;
			app.callFunction(
				'select_diary',
				{ data: '' },
				(data, res) => {
					console.log(res);
					if (res.success) {
						that.list = data.list;
					}
				},
				true
			);
			console.log(this.list)
		},
		//点击最后一级时触发该事件
		treeItemClick(item) {
			let { id, name, parentId } = item;
			// uni.showModal({
			// 	content: `点击了${parentId.length + 1}级菜单, ${name}, id为${id}, 父id为${parentId.toString()}`
			// });
			uni.navigateTo({
				url:'../read/read?id='+item.id+'&name='+item.name
			})
			console.log(item);
		}
	}
};
</script>

<style lang="less">
page {
	// background-color: #ffeefe; /* 页面背景色 */
}
.page {
	display: flex;
	flex-direction: column;
	box-sizing: bo rder-box;
	min-height: 100%;
	// background-color: #ffeefe; /* 页面背景色 */
	height: auto;
}

.curved_box {
	display: inline-block;
	display: inline;
	width: 540rpx;
	margin: 100rpx;
	height: auto;
	background-color: #fdf5e5;
	border: 1px solid #eee;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
	position: relative;
	zoom: 1;
}

.curved_box:before {
	-webkit-transform: skew(-15deg) rotate(-6deg);
	-moz-transform: skew(-15deg) rotate(-6deg);
	transform: skew(-15deg) rotate(-6deg);
	left: 15px;
}
.curved_box:after {
	-webkit-transform: skew(15deg) rotate(6deg);
	-moz-transform: skew(15deg) rotate(6deg);
	transform: skew(15deg) rotate(6deg);
	right: 15px;
}

.curved_box:before,
.curved_box:after {
	width: 70%;
	height: 55%;
	content: ' ';

	-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);

	position: absolute;
	bottom: 10px;
	z-index: -1;
}
.img {
	width: 260rpx;
	height: 260rpx;
	border-radius: 90rpx;
	margin-top: 10rpx;
}
.img-item {
	max-width: 520rpx;
	max-height: 520rpx;
	margin-left: 20rpx;
}
.text_cover {
	.text-center {
		text-align: center;
	}
	.titleImg {
		height: 160rpx;
		width: 426rpx;
		margin-top: 60rpx;
		margin-left: 50rpx;
	}
	.addImg {
		height: 200rpx;
		width: 200rpx;
		margin-left: 170rpx;
	}
	.textImg {
		height: 160rpx;
		width: 380rpx;
		margin-left: 80rpx;
	}
	.loveImg {
		height: 450rpx;
		width: 450rpx;
		margin-left: 40rpx;
	}
	.footerBtn {
		.footerWriteImg {
			height: 80rpx;
			width: 200rpx;
		}
		.footerReadImg {
			height: 80rpx;
			width: 200rpx;
			margin-left: 130rpx;
		}
	}
	.loveText {
		font-size: 36rpx;
		font-family: '楷体';
		margin-top: 10rpx;
		.text-2 {
			margin-left: 70rpx;
		}
	}

	//item分割线
	.item-line {
		height: 1px;
		width: 750rpx;
		transform: scaleY(0.3);
		background-color: rgba(0, 0, 0, 0.1);
		z-index: 999;
	}
	.text-aire {
		margin-left: 36rpx;
	}
	.form {
		display: block;
		.formItem {
			box-sizing: border-box;
			width: 100%;
			height: 112rpx;
			font-size: 36rpx;
			padding: 32rpx;
			margin: 20rpx 0;
			border-radius: 56rpx;
			font-family: '楷体';
			&.submit {
				// color: #ffffff;
				text-align: center;
				font-size: 40rpx;
				line-height: 40rpx;
			}
		}
	}
}
</style>
